<template>
  <div>
    <van-search v-model="search" placeholder="请输入省份" @search="onSearch"/>
    <p>热门省份</p>
    <div class="hot-provinces">
      <van-button v-for="province in hotProvinces" :key="province" @click="selectProvince(province)">
        {{ province }}
      </van-button>
    </div>
    <van-tabs v-model="active">
      <van-tab title="省份列表">
        <van-index-bar :index-list="indexList">
          <van-index-anchor v-for="index in indexList" :key="index" :index="index">{{ index }}</van-index-anchor>
          <van-cell v-for="province in filteredProvinces" :key="province" :title="province" @click="selectProvince(province)"/>
        </van-index-bar>
      </van-tab>
    </van-tabs>
    <div v-if="selectedProvince">
      <h2>{{ selectedProvince }}的政策</h2>
      <p>{{ policies[selectedProvince] }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Search, Cell, Button, Tabs, Tab, IndexBar, IndexAnchor } from 'vant';

export default {
  components: {
    'van-search': Search,
    'van-cell': Cell,
    'van-button': Button,
    'van-tabs': Tabs,
    'van-tab': Tab,
    'van-index-bar': IndexBar,
    'van-index-anchor': IndexAnchor
  },
  setup() {
    const search = ref('');
    const active = ref(0);
    const hotProvinces = ref(['北京', '上海', '广东', '浙江', '江苏', '四川', '河南', '湖北', '湖南']);
    const provinces = ref(['安徽', '北京', '重庆', '福建', '甘肃', '广东', '广西', '贵州', '海南', '河北', '黑龙江', '河南', '香港', '湖北', '湖南', '江苏', '江西', '吉林', '辽宁', '澳门', '内蒙古', '宁夏', '青海', '山东', '山西', '陕西', '上海', '四川', '台湾', '天津', '西藏', '新疆', '云南', '浙江']);
    const filteredProvinces = ref([...provinces.value]);
    const indexList = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'Q', 'S', 'T', 'X', 'Y', 'Z']);
    const selectedProvince = ref('');
    const policies = ref({
      '北京': '北京市的残疾人就业政策...',
      '上海': '上海市的残疾人就业政策...',
      '广东': '广东省的残疾人就业政策...',
      // 其他省份的政策...
    });

    const onSearch = () => {
      if (search.value) {
        filteredProvinces.value = provinces.value.filter(province => province.includes(search.value));
      } else {
        filteredProvinces.value = provinces.value;
      }
    };

    const selectProvince = (province) => {
      selectedProvince.value = province;
    };

    return {
      search,
      active,
      hotProvinces,
      filteredProvinces,
      indexList,
      selectedProvince,
      policies,
      onSearch,
      selectProvince
    };
  }
};
</script>

<style scoped>
.hot-provinces {
  display: flex;
  flex-wrap: wrap;
}

.hot-provinces .van-button {
  margin: 4px;
}
</style>
